<template>
	<view class="box form-box">
		<view class="item notice">
			<view class="notice">
				<image :src="`${$imgurl}/static/icon-jinggao.png`" mode=""></image> 请选择贴合礼物本身的题目，用户会回答率更高~
			</view>
			<view class="input-box">
				<view class="msg">
					谜金题目
				</view>
				<view class="input" @click="onSelect">
					<view style="color:#565968;">{{subjectInfo?subjectInfo.title:'请选择题目'}}</view>  <up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
				</view>
			</view>
		</view>
		<block v-if="subjectInfo">
			<view class="item">
				<view class="input-box">
					<view class="msg">
						题目类型
					</view>
					<view class="input">
						<view style="color:#565968;" v-if="subjectInfo.type=='text'">文字</view>  
						<view style="color:#565968;" v-else-if="subjectInfo.type=='num'">数字</view> 
						<view style="color:#565968;" v-else>字母</view> 
						<up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="input-box">
					<view class="msg">
						答案设置
					</view>
					<view class="input">
						<input :type="subjectInfo.type=='num'?'number':'text'" v-model="answer" placeholder="请输入答案"/>
					</view>
				</view>
				<view class="msg-box">
					最多支持输入20个字符，仅支持全文字或全数字
				</view>
			</view>
			<view class="item">
				<view class="input-box">
					<view class="msg">
						密码个数
					</view>
					<view class="input" >
						<view style="color:#565968;">{{subjectInfo.answer_num}}个</view> <up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="input-box">
					<view class="msg">
						答题人数
					</view>
					<view class="input">
						<view style="color:#565968;">{{subjectInfo.people==0?'不限':subjectInfo.people}}</view> <up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="input-box">
					<view class="msg">
						有效时间
					</view>
					<view class="input">
						<view style="color:#565968;">{{subjectInfo.time}}小时</view> <up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="input-box col">
					<view class="msg">
						礼物信息
					</view>
					<view class="info">
						<view class="item" v-for="(item,index) in order.cartInfo">
							<view class="image">
								<image :src="item.attrInfo.image" mode="aspectFill"></image>
								<image class="icon" :src="`${$imgurl}/static/icon-wen.png`" mode=""></image>
							</view>
							<view class="text">
								<view class="h1">
									{{item.productInfo.store_name}} 
								</view>
								<view class="money">
									<view class="em">￥</view> {{item.attrInfo.price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="input-box col">
					<view class="msg">
						游戏提示 <switch color="#FF401A" disabled :checked="subjectInfo.tip" />
					</view>
					<view class="input-s">
						<input type="text" disabled :value="`该答案为${subjectInfo.answer_long==0?'':subjectInfo.answer_long+'个'}${subjectInfo.type=='text'?'文字':(subjectInfo.type=='num'?'数字':'字母')}`" placeholder="盐水能中和菠萝蛋白酶，降低过敏。">
					</view>
				</view>
			</view>
		</block>
		<view class="item">
			<view class="input-box col">
				<view class="msg">
					增加提示
				</view>
				<view class="msg-s">
					<view v-for="(item,index) in tips">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="box btn" @click="onSubmit">
				提交发起
			</view>
		</view>
		
		<up-popup :show="selectShow" mode="bottom" closeable :safeAreaInsetBottom="false" bgColor="transparent" @close="selectShow=false" >
			<view class="select-alert" >
				<view class="box">
					<view class="search-box">
						<up-search placeholder="输入关键词" v-model="keyword"></up-search>
					</view>
					
					<view class="list-box">

						<view class="it" @click="onSelectOk(item.id)" v-for="(item,index) in subjectShow"> 
							{{item.title}}
						</view>
						
					</view>
				</view>
				
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {ref,computed} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import { getOrderDetail } from "@/api/products"
	import {subjectGoldLabelApi,subjectGoldInfoApi,saveGoldCoinApi} from "@/api/bonus.js"
	import {getSaveTipsConfig} from "@/api/public.js"
	const order=ref('')
	const subjectList=ref([])
	const subjectShow=computed(()=>subjectList.value.filter((it)=>keyword.value==''?true:it.title.includes(keyword.value)))
	const selectShow=ref(false)
	const subjectInfo=ref('')
	const keyword=ref('')
	const tips=ref([])
	const answer=ref('')
	onLoad(async (obj)=>{
		const res= await getOrderDetail(obj.id)
		order.value=res.data
		const re= await getSaveTipsConfig()
		tips.value=re.data.gold_coin
	})
	
	const onShowSheet=()=>{
		uni.showActionSheet({
			itemList: ['A', 'B', 'C'],
			success: function (res) {
				console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
	const onSelect=async ()=>{
		if(subjectList.value.length==0){
			const res= await subjectGoldLabelApi()
			subjectList.value=res.data
		}
		selectShow.value=true
	}
	const onSelectOk=async (id)=>{
		selectShow.value=false
		const res= await subjectGoldInfoApi(id)
		subjectInfo.value=res.data.info
	}
	const onSubmit=async ()=>{
		if(subjectInfo.value==0) return uni.$u.toast('请选择题目')
		if(answer.value=='') return uni.$u.toast('请输入答案')
		let res = await saveGoldCoinApi({
			id:0,
			o_id:order.value.id,
			subject_id:subjectInfo.value.id,
			answer:answer.value
		})
		uni.$u.toast('提交成功！')
		setTimeout(()=>{
			uni.redirectTo({
				url:'/pages/user/bonus'
			})
		},1500)
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F6FA;
		
	}
	.select-alert{
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx 0;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom) );
		.box{
			display: flex;
			height:100%;
			flex-direction: column;
			.search-box{
				padding-right:100rpx;
			}
			.list-box{
				overflow-y: auto;
				margin-top:20rpx;
				position: relative;
				max-height:60vh;
				border-top: 1rpx solid #eeeeee;
				.it{
					font-size:28rpx;
					padding:28rpx 0;
					border-bottom: 1rpx solid #eeeeee;
				}
			}
		}
		
	}
	.bottom-box{
		position: fixed;
		bottom:0;width:100%;
		left:0;
		background-color: #fff;
		padding:16rpx 0;
		padding-bottom: calc(16rpx + env(safe-area-inset-bottom) );
		z-index: 999;
		.btn{
			
			height:92rpx;line-height: 92rpx;
			border-radius: 90rpx;
			text-align: center;color:#fff;font-size: 32rpx;
			font-weight: bold;
			background: linear-gradient(to left, #FF9940,#FD2A00);
		}
	}
	.form-box{
		padding-bottom:	calc(92rpx + 16rpx + 16rpx + 30rpx);
		padding-bottom: calc(92rpx + 16rpx + 16rpx + 30rpx + env(safe-area-inset-bottom) );
		.item{
			margin-top:16rpx;
			
			&.notice{
				background-color: #FFF0EB;
				border-radius: 16rpx 16rpx 0 0;
			}
			.notice{
				line-height: 84rpx;
				padding:0 28rpx;
				font-size: 28rpx;
				color:#FF401A;
				align-items: center;
				display: flex;
				image{
					width:28rpx;height:28rpx;
				}
			}
			.input-box{
				background-color: #fff;
				border-radius: 16rpx;
				padding:0 28rpx;
				display: flex;
				justify-content: space-between;
				height:104rpx;align-items: center;
				&.col{
					flex-direction: column;
					align-items: initial;
					padding:32rpx 28rpx 28rpx;
					height: auto;
				}
				
				.msg{
					font-size: 32rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.input{
					flex:1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 28rpx;
					color:#141311;
					padding-left: 20rpx;
					input{
						width:100%;
						text-align: right;
						color:#141311;
						font-size: 28rpx;
					}
				}
				.input-s{
					background-color: #F5F6FA;
					border-radius: 16rpx;
					height:92rpx;
					margin-top:24rpx;
					padding:0 28rpx;
					input{
						height:92rpx;line-height: 92rpx;
						width:100%;font-size: 28rpx;
					}
				}
				.msg-s{
					margin-top:24rpx;
					font-size: 28rpx;
					line-height: 48rpx;
					color:#141311;
				}
			}
			.msg-box{
				margin-top:28rpx;line-height: 1;
				font-size:24rpx;
				padding-bottom: 12rpx;
				text-align: right;
				color:#FF401A;
			}
			
			.info{
				border:1rpx solid #E0E0E0;
				border-radius: 16rpx;
				margin-top:28rpx;
				.item{
					display: flex;
					background-color: #F5F6FA;
					padding:20rpx;
					margin-top:0;
					.image{
						width:120rpx;height:120rpx;
						border-radius: 12rpx;
						overflow: hidden;
						position: relative;
						image{
							width:100%;height:100%;display: block;
						}
						.icon{
							position: absolute;top:0;left:0;
							width:32rpx;height:32rpx;
						}
					}
					.text{
						width:454rpx;
						margin-left:24rpx;
						font-weight: bold;
						color:#838A99;
						font-size: 28rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						line-height: 1;
						.h1{
							white-space: nowrap; /* 防止文本换行 */
							overflow: hidden; /* 隐藏溢出的文本 */
							text-overflow: ellipsis; /* 显示省略号 */
							
						}
						.money{
							margin-top: 28rpx;
							font-size:32rpx;font-weight: bold;color:#838A99;
							display: flex;
							align-items: flex-end;
							line-height: 1;
							.em{
								font-size:24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
